<style lang="less">
  .main {
    background-color: white;
  }
</style>

<template>
  <div style="height: 100%" class="main">
    <Row class="mb30">
      <Col span="4">
        <span>社区便民服务事项清单</span>
      </Col>
      <Col span="5">
        <span>部门数（7） |   事项数（115）</span>
      </Col>
      <Col span="10">
        <div class="search-btn">
          <Input search placeholder="事项关键字" v-model="searchName" @on-change="searchList1"
                 @on-search="searchList" class="search-input"/>
        </div>
      </Col>
      <Col span="2">
        <Button size="large" @click="searchList" class="search-btn-style">搜 索</Button>
      </Col>
    </Row>
    <Collapse>
      <div v-for="(item, index) in treeDataList" :key="index">
        <Panel :name="index.toString()" :style="{'background-color':item.color}" v-if="!reloadItem" v-show="!item.hidden && item.count > 0">
          <span>{{item.type_name}}（{{item.count}}）</span>
          <div slot="content">
            <Tabs v-if="item.children && item.children[0] && item.children[0].children">
              <TabPane v-for="(list, index1) in item.children" :key="index1" :label="list.type_name + '（' + list.count + '）'" :name="index1.toString()">
                <div v-for="(item1, index2) in list.children" :key="index2" :v-if="item1.show">
                  <Card class="card-btn" v-show="!item1.hidden">
                    <div style="text-align:center;height:80px;font-weight:500">
                      <h4>{{item1.type_name}}</h4>
                    </div>
                    <div style="text-align:center;height:40px;line-height:40px;">
                      <Row>
                        <Col span="8" offset="2">
                          <Button size="small" shape="circle" class="item-btn" @click="viewProcess(item1)">查看</Button>
                        </Col>
                        <Col span="8" offset="4">
                          <Button size="small" shape="circle" class="item-btn" @click="downLoad(item1)">下载</Button>
                        </Col>
                        <!-- <Col span="8">
                          <Button size="small" shape="circle" class="item-btn">办理</Button>
                        </Col> -->
                      </Row>
                    </div>
                  </Card>
                </div>
              </TabPane>
            </Tabs>
            <div v-if="item.children && !item.children[0].children">
              <div v-for="(list, index1) in item.children" :key="index1" :v-if="item.show">
                <Card class="card-btn" v-show="!list.hidden">
                  <div style="text-align:center;height:80px;font-weight:500">
                    <h4>{{list.type_name}}</h4>
                  </div>
                  <div style="text-align:center;height:40px;line-height:40px;">
                    <Row>
                      <Col span="8" offset="2">
                        <Button size="small" shape="circle" class="item-btn" @click="viewProcess(list)">查看</Button>
                      </Col>
                      <Col span="8" offset="4">
                        <Button size="small" shape="circle" class="item-btn" @click="downLoad(list)">下载</Button>
                      </Col>
                      <!-- <Col span="8">
                        <Button size="small" shape="circle" class="item-btn">办理</Button>
                      </Col> -->
                    </Row>
                  </div>
                </Card>
              </div>
            </div>
          </div>
        </Panel>
      </div>
      <Row v-if="loadData == true">
        <Col class="demo-spin-col" span="8" offset="8">
          <Spin fix>
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
            <div>数据正在加载</div>
          </Spin>
        </Col>
      </Row>
    </Collapse>
    <Modal v-model="display_model1_obj.modal1" :title="display_model1_obj.text" width="900">
      <Row>
        <Col span="24" class="ivu-form-item-content" style="text-align: center">
          <embed width="800" v-if="display_model1_obj.modal1" height="600" :src="display_model1_obj.filepath"/>
        </Col>
      </Row>
      <div slot="footer">
        <Button type="error" size="large" @click="display_model1_obj.modal1=false">关闭</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import './index.less'
import { treelist } from '@/api/eventlist'

export default {
  name: 'itemlist',
  data () {
    return {
      loadData: true,
      reloadItem: false,
      searchName: '',
      loadUserInfo: true,
      treeDataList: [],
      totalBMNum: 0,
      totalItemNum: 0,
      display_model1_obj: { modal1: false, filepath: '' }
    }
  },
  computed: {
    companyCode () {
      return this.$store.state.user.severUserInfo.company_code
    }
  },
  methods: {
    getTreeList () {
      treelist().then(ret => {
        let that = this
        this.treeDataList = ret.data.data
        var array = []
        this.treeDataList.forEach(function (element, index) {
          element.count = element.count || 0
          if (element.children) {
            that.totalBMNum += 1
            element.children.forEach(e2 => {
              if (e2.children) {
                e2.count = e2.children.length || 0
                element.count += e2.count
              }
            })
            element.count = element.count || element.children.length
          }
          if (element.count > 0) {
            array.push(element)
          }
          that.totalItemNum += element.count
        })
        this.treeDataList = array
        this.treeDataList.forEach(function (element, index) {
          if (index % 2 === 0) {
            element.color = '#235CA7'
          } else {
            element.color = '#79A0D1'
          }
        })
        this.loadData = false
      })
      this.loadData = true
    },
    searchList1 () {
      if (!this.searchName) {
        this.searchList()
      }
    },
    searchList () {
      this.reloadItem = true
      this.treeDataList.forEach(e1 => {
        e1.hidden = true
        if (e1.children) {
          let curNum1 = 0
          e1.children.forEach(e2 => {
            if (e2.children) {
              let curNum2 = 0
              e2.children.forEach(e3 => {
                e3.hidden = true
                if (e3.type_name.indexOf(this.searchName) >= 0) {
                  e3.hidden = false
                  curNum2++
                  curNum1++
                }
              })
              e2.hidden = true
              if (curNum2 > 0) {
                e2.count = curNum2
                e2.hidden = false
              }
            } else {
              e2.hidden = true
              if (e2.type_name.indexOf(this.searchName) >= 0) {
                e2.hidden = false
                curNum1++
              }
            }
          })
          if (curNum1 > 0) {
            e1.count = curNum1
            e1.hidden = false
          }
        } else {
          if (!this.searchName) {
            e1.hidden = false
          }
        }
      })
      this.$nextTick(() => {
        this.reloadItem = false
      })
    },
    viewProcess (item) {
      if (item.file_url) {
        this.display_model1_obj.text = item.type_name
        this.display_model1_obj.modal1 = true
        this.display_model1_obj.filepath = item.file_url
      } else {
        this.$Notice.error({ title: '无文件', desc: '当前事项无PDF说明文档' })
      }
    },
    downLoad (item) {
      if (item.file_url) {
        window.open(item.file_url)
      } else {
        this.$Notice.error({ title: '无文件', desc: '当前事项无PDF说明文档' })
      }
    },
    evil (fn) {
      var Fn = Function
      return new Fn('return ' + fn)()
    }
  },
  mounted () {
    this.getTreeList()
  }
}
</script>
